<template>
	<view class="outside" @click="handlerClick(id)">
		<view class="title"><text>重要</text>通知</view>
		<image src="../../static/home_icon_trumpet@2x.png" mode="heightFix"></image>
		<view class="text">{{content}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: String,
			content: String
		},
		onLoad() {

		},
		methods: {
			handlerClick(id) {
				this.$emit('goTo', 'notificationInfo', id)
			}
		}
	}
</script>

<style>
	.outside {
		background: #eee;
		height: 60rpx;
		line-height: 60rpx;
		width: calc(100% - 80rpx);
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}
	
	.title{
		color: #333;
		font-size: 26rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}
	
	.title text{
		color: #AE6059 !important;
	}

	.content image {
		height: 24rpx;
	}

	.text {
		font-size: 24rpx;
		color: #666;
		height: 100%;
		margin-left: 20rpx;
		width: calc(100% - 180rpx);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>
